---
title: Blocks
description: Pre-built, ready-to-use block templates for your retro 8-bit projects!
---

## Blocks

Explore our collection of pre-built 8-bit styled blocks. Each block is a complete, ready-to-use template that you can copy directly into your project.

---

## 🎮 Gaming

Build immersive retro game interfaces with these gaming-focused blocks.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
  <a href="/docs/blocks/gaming/chapter-intro" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Chapter Intro</h4>
    <p className="text-sm text-muted-foreground">Level introduction screens with background images</p>
  </a>
  <a href="/docs/blocks/gaming/main-menu" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Main Menu</h4>
    <p className="text-sm text-muted-foreground">Classic game main menu interface</p>
  </a>
  <a href="/docs/blocks/gaming/difficulty-select" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Difficulty Select</h4>
    <p className="text-sm text-muted-foreground">Game difficulty selection screen</p>
  </a>
  <a href="/docs/blocks/gaming/dialogue" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Dialogue</h4>
    <p className="text-sm text-muted-foreground">RPG-style dialogue boxes with avatars</p>
  </a>
  <a href="/docs/blocks/gaming/pause-menu" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Pause Menu</h4>
    <p className="text-sm text-muted-foreground">In-game pause menu overlay</p>
  </a>
  <a href="/docs/blocks/gaming/game-over" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Game Over</h4>
    <p className="text-sm text-muted-foreground">Game over screen with retry options</p>
  </a>
  <a href="/docs/blocks/gaming/audio-settings" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Audio Settings</h4>
    <p className="text-sm text-muted-foreground">Volume and sound settings panel</p>
  </a>
  <a href="/docs/blocks/gaming/player-profile-card" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Player Profile Card</h4>
    <p className="text-sm text-muted-foreground">Player stats and avatar display</p>
  </a>
  <a href="/docs/blocks/gaming/leaderboard" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Leaderboard</h4>
    <p className="text-sm text-muted-foreground">High score ranking tables</p>
  </a>
  <a href="/docs/blocks/gaming/quest-log" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Quest Log</h4>
    <p className="text-sm text-muted-foreground">Mission and task tracking system</p>
  </a>
</div>

<a href="/docs/blocks/gaming" className="text-primary hover:underline text-sm">
  View all Gaming blocks →
</a>

---

## 🔐 Authentication

Secure and stylish authentication flows with retro aesthetics.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
  <a href="/docs/blocks/authentication/login-form" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Login Form</h4>
    <p className="text-sm text-muted-foreground">Simple login form with email and password</p>
  </a>
  <a href="/docs/blocks/authentication/login-page" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Login Page</h4>
    <p className="text-sm text-muted-foreground">Two column login with cover image</p>
  </a>
  <a href="/docs/blocks/authentication/login-form-2" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Login Form with Icons</h4>
    <p className="text-sm text-muted-foreground">Login form with social login icons</p>
  </a>
  <a href="/docs/blocks/authentication/login-form-with-image" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Login Form with Image</h4>
    <p className="text-sm text-muted-foreground">Compact login with side image</p>
  </a>
</div>

<a href="/docs/blocks/authentication" className="text-primary hover:underline text-sm">
  View all Authentication blocks →
</a>

---

## 📊 Dashboard

Complete dashboard templates for data visualization and admin interfaces.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
  <a href="/docs/blocks/dashboard/dashboard-01" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">8-bit Dashboard</h4>
    <p className="text-sm text-muted-foreground">Complete dashboard with sidebar and charts</p>
  </a>
</div>

<a href="/docs/blocks/dashboard" className="text-primary hover:underline text-sm">
  View all Dashboard blocks →
</a>

---

## 📅 Calendar

Date selection and scheduling blocks with pixel-perfect styling.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
  <a href="/docs/blocks/calendar/calendar-block" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Simple Calendar</h4>
    <p className="text-sm text-muted-foreground">Basic date selection calendar</p>
  </a>
  <a href="/docs/blocks/calendar/calendar-range" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Range Calendar</h4>
    <p className="text-sm text-muted-foreground">Date range selection with two months</p>
  </a>
  <a href="/docs/blocks/calendar/calendar-single" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Single Date Calendar</h4>
    <p className="text-sm text-muted-foreground">Single date with dropdown navigation</p>
  </a>
</div>

<a href="/docs/blocks/calendar" className="text-primary hover:underline text-sm">
  View all Calendar blocks →
</a>

---

## 📈 Charts

Data visualization components with retro styling.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
  <a href="/docs/blocks/charts/chart-bar" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Bar Chart</h4>
    <p className="text-sm text-muted-foreground">Simple bar chart visualization</p>
  </a>
  <a href="/docs/blocks/charts/chart-bar-multiple" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Multiple Bar Chart</h4>
    <p className="text-sm text-muted-foreground">Grouped bar chart comparison</p>
  </a>
  <a href="/docs/blocks/charts/chart-area-step" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Step Area Chart</h4>
    <p className="text-sm text-muted-foreground">Stepped area chart for trends</p>
  </a>
</div>

<a href="/docs/blocks/charts" className="text-primary hover:underline text-sm">
  View all Chart blocks →
</a>

---

## Need Help?

We're here to help you get started with 8bitcn/ui blocks.

- [GitHub Repository](https://github.com/TheOrcDev/8bitcn-ui)
- [Contributors](/contributors)
